<template>
<div>
    <div class="bigtitle" mgt3>
        <div class="bigtitle-title" nobd>订单基本信息</div>
    </div>

    <p mgt2>订单状态：{{getOrderStatus(order)}}</p>
    <p mgt2>应付金额：<span red>￥{{formatPrice(order.info.totalAmount)}}</span></p>
    <p mgt2>订单编号：{{order.orderNumber}}</p>
    <p mgt2>创建时间：{{formatTimeStr(order.info.creationTime)}}</p>

    <div class="bigtitle" mgt5>
        <div class="bigtitle-title" nobd>收货信息</div>
    </div>
    <p mgt2>收货人：{{order.shipInfo.personName}}</p>
    <p mgt2>手机：{{order.shipInfo.phoneNumber}}</p>
    <p mgt2>收货地址：{{order.shipInfo.address}}</p>


    <div class="bigtitle" mgt5>
        <div class="bigtitle-title" nobd>支付及配送方式</div>
    </div>
    <p mgt2>支付方式：{{getPaymentType(order)}}</p>
    <p mgt2>配送方式：{{order.shipInfo.expressName}}</p>

    <div class="bigtitle" mgt5 nobd>
        <div class="bigtitle-title" nobd sz1>商品清单和结算信息 </div>
    </div>
    <table border="0" cellspacing="0" cellpadding="0" class="minitable-empty" long mgt2>
        <tr>
            <th pd2 text-left>商品名称</th>
            <th pd2>单价(元)</th>
            <th pd2>数量</th>
            <th pd2>赠送积分</th>
            <th pd2>小计(元)</th>
        </tr>
        <tr v-for="(item, index) in order.details" :key="index">
            <td pd2>
                <order-detail-profile :detail="item"></order-detail-profile>
            </td>
            <td w5 pd2 text-center>{{item.price}}</td>
            <td w5 pd2 text-center>x{{item.count}}</td>
            <td w5 pd2 text-center>{{item.xpValue*item.count}}</td>
            <td w5 pd2 text-center>{{item.totalAmount}}</td>
        </tr>
        <tr>
            <td colspan="5" pd2>
                <span>买家留言：</span>
                <span>{{ order.info.remark || '暂无' }}</span>
            </td>
        </tr>
        <tr>
            <td colspan="5" pd2>订单优惠：{{order.info.couponId?order.info.couponProfile:'无'}}；积分抵现（已抵用￥{{formatPrice(order.info.xpAmount)}}）</td>
        </tr>
        <tr>
            <td colspan="5" pd2 text-right>
                <p>
                    <span>商品总金额：</span>
                    <span inline-block w4>¥{{formatPrice(order.info.commodityTotalAmount)}}</span>
                </p>
                <p>
                    <span>运费：</span>
                    <span inline-block w4 red>¥{{formatPrice(order.info.freightAmount)}}</span>
                </p>
                <p>
                    <span>优惠：</span>
                    <span inline-block w4 red>-¥{{formatPrice(order.info.couponAmount + order.info.xpAmount)}}</span>
                </p>
                <p>
                    <span>总计：</span>
                    <span inline-block w4 red>¥{{formatPrice(order.info.totalAmount)}}</span>
                </p>
                <p>
                    <span>赠送积分：</span>
                    <span inline-block w4>{{order.info.bounsXPValue}}</span>
                </p>
            </td>
        </tr>
    </table>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import OrderBase from './OrderBase';
import OrderDetailProfile from '../../components/common/order-detail-profile.vue'

@Component({ 
    components: { OrderDetailProfile } 
})
export default class OrderInfo extends OrderBase{
    @Prop() order:any;
}
</script>